<template>
	<view class="video">
		<!-- 导航 -->
		<view class="topbar">
			<scroll-view class="scroll-view" scroll-x="true" :showScrollBar="false">
				<view class="rel">
					<view class="item" v-for="(item,index) in navList" 
					:class="{active:show==index}" :key="index" @click="change(index)">
						<view class="desc" >
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view> 
		</view>
		
		<!-- 视频列表 -->
		<mescroll-uni :up="up" :down="down" @up="upc" @down="downc">
			<view class="video-list">
				<view class="video-item" v-for="(item,index) in video" :key="index">
					<view class="video-wrap">
						<image :src="item.picUrl" mode="" class="img"></image>
						<view class="desc ellipsis">
							{{item.name}}
						</view>
						<view class="creater-bar flex-box">
							<view class="name">
								{{item.playCount}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</mescroll-uni>
		
		
	</view>	
</template>

<script>
import {getVeNav} from "@/apis/mockindex.js"
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		data() {
			return {
				navList:[],
				show:0,
				video:[],
				up:{
					auto:false,
					page:{
						// num:1,
						size:5	
					}
				},
				down:{
					auto:false
				},
				flag:0
				
				
			}
		},
		components:{MescrollUni},
		onLoad() {
			this.getVeNav();
			this.getVeVedio()
		},
		methods: {
			getVeNav(){
				getVeNav().then(res=>{
					this.navList=res.data.data;
				})
			},
			change(index){
				this.show=index;
				this.getVeVedio(index*5);
				if(this.flag!=0){
					 this.flag=0;
					 this.video=[];
					 this.getVeVedio(index*5);
				}
			},
			
			getVeVedio(index=0){
				this.$API.getSongs().then(res=>{
					if(this.flag!=0){
						 this.video = res.data.result.concat(res);
					}else{
						this.video=res.data.result.splice(index,5);
					}
				})
			},
			
			 async upc(mescroll){ 
				this.flag+=1;
				await this.getVeVedio(this.flag);
				mescroll.endSuccess();
			},
			
			async downc(mescroll){
				this.flag=0;
				await this.getVeVedio();
				mescroll.endSuccess();
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.topbar {
		.h86 {
			height: 86rpx;
		}
	}

	.scroll-view {
		position: fixed;
		top: 0;
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		text-align: center;
		line-height: 86rpx;
		color: #333;
		font-weight: 600;
		border-bottom: 1rpx solid #e6e6e6;
		z-index: 10;
		background: #fff;
		.item {
			position: relative;
			display: inline-block;
			min-width: 126rpx;
			height: 86rpx;
			line-height: 86rpx;
			padding: 0 20rpx;
			
			&.active{
				color:#f32628;
				border-bottom:5rpx solid #f32628;
			};
			
		}
	}

	.slide {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		left: 0;
		bottom: 0rpx;
		background: #f32628;
		transition: transform 0.3s;
		z-index: 2;
		/* #ifdef MP-WEIXIN */
		bottom: 2rpx;
		/* #endif */
	}

	.video-list {
		color: #333;
		background: #f8f8f8;
		.tit-bar {
			padding-left: 32rpx;
		}
		.video-item {
			padding-top: 32rpx;
			background: #fff;
			border-bottom: 24rpx solid #f8f8f8;
		}

		.video-wrap {
			width: 686rpx;
			margin: 0 auto;
		}

		.img {
			display: block;
			width: 686rpx;
			height: 390rpx;
			border-radius: 10rpx;
			background: #eee;
		}

		.desc {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 84rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}

	.creater-bar {
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		.avactor-box {
			align-items: center;
		}
		.avactor {
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
			border-radius: 66rpx;
			background: #eee;
		}

		.name {
			line-height: 100rpx;
		}
	}
</style>
